<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    插值: 
      写法: <p>--{{js表达式}}---{{js表达式2}}</p>
      作用: 动态显示数据
      支持哪些类型数据
        支持所有数据类型
        true/false => 'true' / 'false'
        null/undefined => 空白
   -->
  <div id="root">
    <p>{{msg}}--{{msg.toUpperCase()}}</p>
    <p>obj: {{obj}}</p>
    <p>arr: {{arr}}</p>
    <p>fn(): {{fn()}}</p>
    <p>fn: {{fn}}</p>
    <p>{{true}}--{{false}}--{{null}}--{{undefined}}--{{0}}</p>

  </div>
  <script>
    const vm = new Vue({
      // el: '#root',
      data: {
        msg: 'I Will Back!',
        obj: {a: 1, b: 'abc'},
        arr: [1, 'abc'],
      }
    })

    vm.fn = () => 'fn()...'

    vm.$mount('#root')
  </script>
</body>
</html>